<template>
	<div class="achievement-center">
		<div class="center-animation">
			<img
				class="main-background"
				src="../../images/main-view.png"
				alt="主背景"
			/>
			<img class="light-effect" src="../../images/light.png" alt="光效" />
			<img class="ai-robot" src="../../images/AI.png" alt="AI机器人" />
			<img
				class="center-logo"
				src="../../images/gwgsdrp.png"
				alt="中心LOGO"
			/>
			<!-- <img
				class="floating-logo nanrui-logo"
				src="../../images/nanrui_logo.png"
				alt="南瑞LOGO"
			/>
			<img
				class="floating-logo xidian-logo"
				src="../../images/xidian_logo.png"
				alt="西电LOGO"
			/>
			<img
				class="floating-logo qinghua-logo"
				src="../../images/qinghua_logo.png"
				alt="清华LOGO"
			/> -->
			<div class="circle-modules">
				<div class="circle-module module-1">
					<img
						class="circle-bg"
						src="../../images/base1.png"
						alt="底座"
					/>
					<img
						class="circle-icon-bg"
						src="../../images/NO1.icon.png"
						alt="图标背景"
					/>
					<img
						class="circle-icon"
						src="../../images/qdxy.png"
						alt="庆电小云"
					/>
					<span class="circle-text">庆电小云</span>
				</div>
				<div class="circle-module module-2">
					<img
						class="circle-bg"
						src="../../images/base1.png"
						alt="底座"
					/>
					<img
						class="circle-icon-bg"
						src="../../images/NO1.icon.png"
						alt="图标背景"
					/>
					<img
						class="circle-icon"
						src="../../images/RPA.png"
						alt="RPA规模化应用"
					/>
					<span class="circle-text">RPA规模化应用</span>
				</div>
				<div class="circle-module module-3">
					<img
						class="circle-bg"
						src="../../images/base1.png"
						alt="底座"
					/>
					<img
						class="circle-icon-bg"
						src="../../images/NO1.icon.png"
						alt="图标背景"
					/>
					<img
						class="circle-icon"
						src="../../images/xjsyy.png"
						alt="新技术应用"
					/>
					<span class="circle-text">新技术应用</span>
				</div>
				<div class="circle-module module-4">
					<img
						class="circle-bg"
						src="../../images/base1.png"
						alt="底座"
					/>
					<img
						class="circle-icon-bg"
						src="../../images/NO1.icon.png"
						alt="图标背景"
					/>
					<img
						class="circle-icon"
						src="../../images/zhwl.png"
						alt="智慧物联"
					/>
					<span class="circle-text">智慧物联</span>
				</div>
				<div class="circle-module module-5">
					<img
						class="circle-bg"
						src="../../images/base1.png"
						alt="底座"
					/>
					<img
						class="circle-icon-bg"
						src="../../images/NO1.icon.png"
						alt="图标背景"
					/>
					<img
						class="circle-icon"
						src="../../images/kjcxqn.png"
						alt="科技创新潜能"
					/>
					<span class="circle-text">科技创新潜能</span>
				</div>
				<div class="circle-module module-6">
					<img
						class="circle-bg"
						src="../../images/base1.png"
						alt="底座"
					/>
					<img
						class="circle-icon-bg"
						src="../../images/NO1.icon.png"
						alt="图标背景"
					/>
					<img
						class="circle-icon"
						src="../../images/shudianzhineng.png"
						alt="输电智能化"
					/>
					<span class="circle-text">输电智能化</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "pcPage3Centet",
	props: {
		companiesData: { type: Array, required: true, default: () => [] },
	},
	methods: { initChart() {} },
};
</script>

<style lang="scss" scoped>
.achievement-center {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	--scale: 0.55;

	.center-title {
		position: absolute;
		top: 30px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;

		span {
			font-size: 32px;
			font-weight: bold;
			color: #ffffff;
			text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
			background: linear-gradient(90deg, #00ffff, #66ccff, #00ffff);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
	}

	.center-animation {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateY(-10%) scale(var(--scale));
		transform-origin: center center;

		.main-background {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 95%;
			height: 95%;
			object-fit: contain;
			z-index: 1;
			opacity: 0.9;
		}

		.light-effect {
			position: absolute;
			top: 30%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 60%;
			height: 60%;
			object-fit: contain;
			z-index: 2;
			animation: lightPulse 3s ease-in-out infinite;
		}

		.ai-robot {
			position: absolute;
			top: 45%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 400px;
			height: 400px;
			object-fit: contain;
			z-index: 4;
			animation: robotFloat 4s ease-in-out infinite;
		}

		.center-logo {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 180px;
			height: 180px;
			object-fit: contain;
			z-index: 3;
			margin-top: -80px;
		}

		.floating-logo {
			position: absolute;
			width: 160px;
			height: 160px;
			object-fit: contain;
			z-index: 1003;

			&.nanrui-logo {
				top: 38%;
				left: 33%;
				animation: floatAnimation1 3s infinite ease-in-out;
			}

			&.xidian-logo {
				top: 48%;
				left: 46%;
				animation: floatAnimation2 2.5s infinite ease-in-out;
			}

			&.qinghua-logo {
				top: 28%;
				left: 58%;
				animation: floatAnimation3 3.5s infinite ease-in-out;
			}
		}

		.circle-modules {
			position: absolute;
			top: 48%;
			left: 48%;
			transform: translate(-60%, -60%);
			width: 1000px;
			height: 1000px;
			z-index: 5;

			.circle-module {
				position: absolute;
				width: 400px;
				height: 400px;
				top: 50%;
				left: 50%;
				transform-origin: 0 0;

				.circle-bg {
					position: absolute;
					bottom: -100px;
					left: 0;
					width: 100%;
					height: 100%;
					object-fit: contain;
				}

				.circle-icon-bg {
					position: absolute;
					top: 10%;
					left: 10%;
					width: 80%;
					height: 80%;
					object-fit: contain;
					z-index: 1;
				}

				.circle-icon {
					position: absolute;
					top: 25%;
					left: 25%;
					width: 50%;
					height: 50%;
					object-fit: contain;
					z-index: 2;
				}

				.circle-text {
					position: absolute;
					bottom: -90px;
					left: 50%;
					transform: translateX(-50%);
					font-size: 36px;
					font-weight: bold;
					color: #ffffff;
					text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
					white-space: nowrap;
					z-index: 3;
				}

				// 6个模块的椭圆轨迹分布 - 使用原来的动画原理
				&.module-1 {
					animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite
							alternate,
						animY 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite
							alternate,
						scale 24s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite
							alternate;
				}

				&.module-2 {
					animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite
							alternate,
						animY 12s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
						scale 24s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
				}

				&.module-3 {
					animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite
							alternate,
						animY 12s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
						scale 24s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
				}

				&.module-4 {
					animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -18s infinite
							alternate,
						animY 12s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
						scale 24s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
				}

				&.module-5 {
					animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -22s infinite
							alternate,
						animY 12s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate,
						scale 24s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate;
				}

				&.module-6 {
					animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -26s infinite
							alternate,
						animY 12s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate,
						scale 24s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate;
				}
			}
		}
	}
}

// 动画效果
@keyframes lightPulse {
	0%,
	100% {
		opacity: 0.6;
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.05);
	}
}

@keyframes robotFloat {
	0%,
	100% {
		transform: translate(-50%, -50%) translateY(0px);
	}
	50% {
		transform: translate(-50%, -50%) translateY(-10px);
	}
}

@keyframes floatAnimation1 {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-28px);
	}
}

@keyframes floatAnimation2 {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-26px);
	}
}

@keyframes floatAnimation3 {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
}

@keyframes rotateModules {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@keyframes keepTextUpright {
	0% {
		transform: translateX(-50%) rotate(0deg);
	}
	100% {
		transform: translateX(-50%) rotate(-360deg);
	}
}

@keyframes rotateModules {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

// 原来的椭圆轨迹动画实现
@keyframes animX {
	0% {
		left: -20%;
	}
	100% {
		left: 120%;
	}
}

@keyframes animY {
	0% {
		top: 20%;
	}
	100% {
		top: 80%;
	}
}

@keyframes scale {
	0% {
		transform: scale(0.6);
		opacity: 0.6;
	}
	50% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(0.6);
		opacity: 0.6;
	}
}
</style>